<template>
  <div class="city" ref="cityDom">
    <div>
      <div class="cityTitle">
        <p>当前城市</p>
      </div>
      <div class="cityList">
        <div class="nowCity_b ">{{this.nowCity}}</div>
      </div>
      <div class="cityTitle">
        <p>热门城市</p>
      </div>
      <div class="cityList">
        <span v-for="hot of hotcity" :key="hot.id" style="margin-left: .06rem" @click="cityClick(hot.name)">
          <div class="nowCity">{{hot.name}}</div>
        </span>
      </div>
      <div v-for="(city,key) of citys" :key="key" :ref="key">
        <div class="cityTitle">
          <p>{{key}}</p>
        </div>
        <div class="cityList">
          <span v-for="city of city"  style="margin-left: .06rem" :key="city.id" @click="cityClick(city.name)">
            <div class="nowCity">{{city.name}}</div>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Bscoll from 'better-scroll'
  import { mapState } from 'vuex'
  export default {
    name: "cityList",
    props:{
      hotcity:Array,
      citys:Object,
      letter:String
    },
    computed:{
      ...mapState(['nowCity'])
    },
    methods :{
      cityClick (city){
        this.$store.commit('changeNowCity',city)
        this.$router.push('/')
      }
    },
    mounted (){
      this.scroll = new Bscoll(this.$refs.cityDom)
    },
    watch :{
      letter (){
        if(this.letter){
          const element = this.$refs[this.letter][0]
          this.scroll.scrollToElement(element)
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~css/varibles.styl";
  .city{ position: absolute;top: 1.58rem;left: 0;right: 0;bottom: 0;overflow: hidden}
  .cityTitle{ height: .6rem;line-height: .5rem;background: #eeee;border-bottom: 1px solid #ddd;
    padding-left:.2rem;font-size: .24rem;align-items: center;display: flex}
  .cityList{ padding:.1rem .48rem .2rem .2rem}
  .nowCity{ border: 1px solid #f1f1f1;padding:0.2rem 0.2rem;width: 1.4rem;text-align: center;
    border-radius: .1rem;display: inline-block;margin-top: .1rem;cursor: pointer}
  .nowCity_b{ border: 1px solid #00bcd4;padding:0.2rem 0.2rem;width: 1.4rem;text-align: center;
    border-radius: .1rem;display: inline-block;margin-top: .1rem;cursor: pointer}
</style>
